<template>
    <el-row>
        <el-col :span="20" :offset="2">
            <div class="title">
                <div class="publish">
                    <span class="title-publish">发帖</span>
                </div>
                <div class="back">
                    <a class="back-a" @click="back">后退</a>
                </div>
            </div>
            <div>
                <el-form ref="postInfo" :model="postInfo" :rules="rules" label-position="left" label-width="80px">
                    <el-form-item label="标题" prop="title">
                        <el-input v-model="postInfo.title"></el-input>
                    </el-form-item>
                    <el-form-item label="区域" prop="area" disabled>
                        <el-select v-model="postInfo.area" class="select" placeholder="请选择区域" disabled>
                            <el-option v-for="area in areas"
                                       :key="area.id"
                                       :label="area.name"
                                       :value="area.name"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="标签" prop="label">
                        <el-select v-model="postInfo.labelIds" class="select" multiple placeholder="请选择标签">
                            <el-option
                                v-for="label in labels"
                                :key="label.id"
                                :label="label.name"
                                :value="label.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="类型" prop="type">
                        <el-select v-model="postInfo.type" class="select" placeholder="请选择类型">
                            <el-option
                                v-for="(type,index) in postType"
                                :key="index"
                                :label="type.text"
                                :value="index">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="内容" prop="content">
                        <post-editor v-model="postInfo.content"></post-editor>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="publish">发布</el-button>
                        <el-button @click="postInfo.content=''">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-col>
    </el-row>
</template>

<script>
    import PostEditor from '@/components/post/PostEditor'
    import { mapActions } from 'vuex'
    import { postType } from '@/constant'

    export default {
        name: 'publish',
        components: {
            PostEditor
        },
        data () {
            return {
                areas: [],
                labels: [],
                postType: [],
                postInfo: {
                    title: '',
                    area: '',
                    labelIds: [],
                    type: 0,
                    content: ''
                },
                rules: {
                    title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
                    content: [{ required: true, message: '请输入内容', trigger: 'blur' }]
                }
            }
        },
        mounted () {
            this.action(this.listAreaAction(), data => {
                this.areas = data.data
            })
            this.action(this.listLabelAction(), data => {
                this.labels = data.data
            })
            this.postType = postType
            this.postInfo.area = this.getArea()
        },
        methods: {
            ...mapActions({
                listAreaAction: 'area/listArea',
                listLabelAction: 'label/listLabel',
                publishAction: 'post/publish'
            }),
            getArea () {
                let paths = this.$route.path.split('/')
                return paths[2]
            },
            areaPath () {
                return this.$route.path.substr(0, this.$route.path.lastIndexOf('/'))
            },
            publish () {
                this.$refs['postInfo'].validate(valid => {
                    if (valid) {
                        this.action(this.publishAction(this.postInfo), data => {
                            this.postInfo.content = ''
                            this.$router.push({ path: this.areaPath(), query: { publish: true } })
                        })
                    } else {
                        return false
                    }
                })
            },
            back () {
                this.$router.go(-1)
            }
        }
    }
</script>

<style lang="scss" scoped>
    .title {
        width: 100%;
        margin: 32px 0;

        .publish {
            .title-publish {
                font-size: 32px;
                font-weight: bolder;
            }
        }

        .back {
            float: right;

            .back-a {
                font-size: 16px;
                line-height: 32px;

                color: #6159ff;
            }

            a {
                text-decoration: none;
                cursor: pointer;
            }

            a:link {
                color: #6159ff;
            }

            a:visited {
                color: #6159ff;
            }

            a:hover {
                color: rgba(255, 151, 60, 0.8);
            }

            a:active {
                color: rgba(255, 86, 25, 0.8);
            }
        }
    }

    .select {
        width: 100%;
    }
</style>
